- Page 6a -

The Photoshop Guru's Handbook - "Creating the NUI"
Part 3 - 2D & 3D (inDepth Interface project)

Setting Text - Making it readable
Page 6a

Text Sample

A very common part of any 'normal' interface is descriptive and/or linked text areas or images. Unless your interface is very large in size, sometimes the text has to be so small that it can be hard to read, or is poor in quality; such as fuzzy or grainy edges. This is usually do to the fact that Photoshop will anti-alias your text by default. That means it's blurring the edges of the characters just a bit, in order to make them smoother on screen. Unfortunately for us this may cause problems when the text is set against any coloured or textured background.

Unless you're using a solid colour behind your text, there are only a few way to combat the problem of tiny text that's unreadable. Here are some easy ways to help keep your text clean and legible when using it on an interface that has either a multi-coloured or high contrast pattern for it's main areas, or has been texture mapped.

We're going to be using my polka-dot textured interface for this example because it's texture is one that would no doubt cause problems with making any text legible; even if it was slightly larger text.
If you haven't completed the previous section on texture mapping, don't worry, just follow along and take note of the methods used here, as i take you through the entire thought process i went had when solving this problem. There's really not that much to know. But showing you how i tackled the problem might help you to better realize ways of doing this yourself. If you want to follow along and duplicate the steps i take, that would be a great idea.
- Ok, so you would start by creating a New layer for your text. Put this layer at the top of the layers palette. Above all of the interface parts.
- The best kind of text to use for interfaces is (and has always been), a clean, straight edged non Serif styled font. But some better quality Serif fonts can also work nicely if they've got clean edges. The most common in use nowadays are:
For PC: non Serif - Arial (all styles), Verdana, Tahoma, Serif - Times New Roman, & Book Antiqua.
For Macintosh: Helvetica (all styles), Geneva, Times, & Georgia. (Macs may have more that i'm not aware of, but these are the main ones)
These are the cleanest, best quality fonts to use if you want to be able to create small to very small text on your interfaces (or any Web graphics actually). If you can find any other fonts that are of as good a quality as these ones are, and may have a little more 'personality' than these do, then by all means use them. But if not, you should try and stick to these few. They've prooved very reliable, and quite suitable for this type of application.

Now... make your text.
If your texture is fairly dark, use white for your text to start with. And use black if your texure has mostly light colours in it. On my sample image i've created just one type of text area - some 'function' text objects. The kind of thing you'd click on or press if you wanted the interface to perfrom some kind of task or operation. It's not really designed as a Web interface persay, but you'll get the idea because it has the same kind of problem to solve.

For this sized interface i used Arial Black as my font. I like this font mainly because it's a bit larger and 'stronger' than Arial Bold is, but is almost the exact same size in terms of how much space it takes up. For Mac users, Helvetica is the equivalent to Arial.
The size i used was 12. But that's not really something we can make an example of here, because everyone's interfaces and other graphics will be various sizes and shapes. We're more concerned with what it looks like against this texture.
Text Sample
As you can see here, using white does not make this text legible. And using black was even worse. In a case such as this, the only viable solution is to 'block-out' the text from the textured background. That means we'll have to create a new area behind the text that will allow it to show up more clearly. This is obviously the first thing that i'm sure you thought of also, right?
Ya... i thought so. Let's go through the steps i took to do this...


Now turn to Page 6b >


3D Shapes / Inset Lines / View Screens
Buttons / Texture Mapping / Adding Text

> To the Top <
> Back to "2D & 3D" <


- Page 6 -

"The Photoshop Guru's Handbook"  and all contents of this site
are copyright 96/00 Mark Anthony Larmand - (aka theKeeper) all rights reserved.